<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>新潮梯联网平台</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <!-- <link rel="stylesheet" th:href="@{/css/wlfb-font/css/iconfont.css}"> -->
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/css/admin/city-select.css}">
    <link rel="shortcut icon" th:href="@{/img/ico/favicon.ico}"/>

    <style>
        .city-select .city-pavilion, .city-select .city-list {
            border: 1px solid #e6e6e6;
            background: #fff;
            position: absolute;
            top: 100%;
            left: -367px;
            z-index: 1;
            margin-top: -3px;
            transition-duration: 400ms;
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .city-select .city-info span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #fff;
            width: 100%;
            padding-right: 10px;
            box-sizing: border-box;
            margin-top: 3px;
            padding-left: 0px;
        }

        .city-select .city-info {
            border: 1px solid #eee;
            background-color: #fff;
            cursor: pointer;
            width: 100px;
            overflow: hidden;
            padding: 0 10px 0 10px;
            padding-top: 0;
            position: relative;
            z-index: 2;
            border-radius: 2px;
            height: 30px;
        }

        .city-select .city-info span:hover i {
            visibility: visible;
            opacity: 0;
            display: none;
        }

        .city-select .city-info .city-input {
            margin-top: 3px;
        }

        .city-select .city-info:after {
            content: '';
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            border-top: 6px solid #ccc;
            border-radius: 2px;
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 12px;
            right: 5px;
            -moz-transition: border .2s;
            -o-transition: border .2s;
            -webkit-transition: border .2s;
            transition: border .2s;
        }

        .city-select .city-pavilion {
            margin-top: -1px;
        }
    </style>
</head>

<body>
<div class="app">
    <div class="app-header">
        <div class="logo">
            <span><img th:src="@{/img/logo.png}" alt=""></span>
        </div>
        <div class="title">
            <span th:text="新潮梯联网平台"></span>
        </div>

        <a th:href="@{/web/logout}">
            <div class="logout">
                <i class="icon xcfont xc-logout"></i><span>退出登录</span>
            </div>
        </a>

        <div class="city">
            <img th:src="@{/img/icon-city.png}" alt="">
            <!--<select name="city">-->
            <!--&lt;!&ndash;<option value="">选择城市</option>&ndash;&gt;-->
            <!--<option th:each="city: ${cityList}"-->
            <!--th:value="${city.code}"-->
            <!--th:text="${city.name}"-->
            <!--th:selected="${city.code == defalutCode} ? true : false "></option>-->
            <!--</select>-->
            <!-- 城市选择插件结构 -->
            <div class="city-select" id="multi-select"></div>
            <input type="hidden" name="departmentId" th:value="${departmentId}"/>
            <input type="hidden" name="isSuperAdmin" th:value="${isSuperAdmin}"/>
        </div>

        <div class="user">
            <img th:src="@{/img/portrait.svg}" alt=""> <span th:text="${userName}"></span>
        </div>
    </div>
    <div class="app-container">
        <div class="app-aside">
            <div class="menu-switch">
                <i class="icon fa fa-angle-double-left"> </i>
            </div>
            <div class="menu-list">
            </div>
        </div>

        <div class="mini-sub-menu">

        </div>

        <div class="app-main">
            <!-- <div class="app-page-header">
                <div class="app-breadcrumb">
                    <a>通用模块</a>
                    <a>列表</a>
                </div>
            </div> -->
            <!-- 初始页面地址 -->
            <iframe th:src="@{/web/home}" frameborder="0" style="z-index: 0;"></iframe>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/js/admin/index.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/citySelect-1.0.3.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content") || '';
    var start = new Date().getTime();
    var MulticitySelect;

    $(function () {
        //初始化菜单
        // var menudata = null;
        var url = context + "/module/listMenuModule";
        App.ajax({
            type: "POST",
            url: url,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    console.log("查询菜单耗时：" + (new Date().getTime() - start));
                    parseMenu(obj.data, context);
                }
            }
        })


        initCitySelect();
    })

    $(document).on('click','.city-info', function (event) {
        $("iframe").css('z-index','-1');
        document.addEventListener('click',xh);

    });

    $(document).on('click','.empty', function (event) {

        var $citySelect = $('.city-select');
        $citySelect.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');
        $citySelect.find('.city-input').removeClass('search-show').find('.input-search').val('');

        changeCity(true);

    });

    function xh(e) {
        var $citySelect = $('.city-select');
        if($citySelect.find(e.target).parents().hasClass(".city-select")) {
            return;
        } else if ($citySelect.find(e.target).length < 1) {
            $citySelect.removeClass('down').find('.city-pavilion, .city-list').addClass('hide');
            $citySelect.find('.city-input').removeClass('search-show').find('.input-search').val('');
            $("iframe").css('z-index','0');
            document.removeEventListener('click', xh);

        }
    }

    //解析函数
    function parseMenu(arr) {

        if (arr.length != 0) {

            function pp(arr, pid) {

                for (var i = 0; i < arr.length; i++) {

                    var menuinfo = arr[i];

                    if (menuinfo.label && menuinfo.moduleId) {

                        if (!pid) {

                            var $menuitem = $('<div class="menu-group">' +
                                '                    <a class="menu-item" href="' + (menuinfo.url ? context + menuinfo.url : '') + '"  id="' + menuinfo.moduleId + '">' +
                                '                        <i class="icon ' + menuinfo.icon + '"></i>' +
                                '                        <div class="title">' + menuinfo.label + '</div>' +
                                (menuinfo.children.length > 0 ? '<div class="arrow fa fa-angle-right"></div>' : '') +
                                '                    </a>' +
                                // '                    <ul style="" id=""></ul>' +
                                '                </div>');
                            $('.menu-list').append($menuitem)
                        } else {

                            var $menuitem = $(
                                '            <div class="menu-group">' +
                                '                <a class="menu-item" href="' + (menuinfo.url ? context + menuinfo.url : '') + '" id="' + menuinfo.moduleId + '">' +
                                '                    <div class="title">' + menuinfo.label + '</div>' +
                                (menuinfo.children.length > 0 ? '<div class="arrow fa fa-angle-right"></div>' : '') +
                                '                </a>' +
                                '            </div>'
                            );

                            if ($('#' + pid).siblings('ul').length > 0) {
                                $('#' + pid).siblings('ul').append($menuitem)
                            } else {
                                $('#' + pid).parent().append('<ul style="" id=""></ul>');
                                $('#' + pid).siblings('ul').append($menuitem)
                            }

                        }

                        pp(menuinfo.children, menuinfo.moduleId);
                    } else {
                        console.log(menuinfo.label); //这里可以写菜单的样式结构...
                    }
                }
            }

            pp(arr, null);
        }
    }

    function changeCity(isClear) {
        var url = "/web/updateLoginUserCity";
        if (context) {
            url = context + url;
        }
        var cityObj = MulticitySelect.getCityVal();

        var cityCode = cityObj == null ? '' : cityObj.id;
        var cityName = cityObj == null ? '' : cityObj.name;
        var isSuperAdmin = $('input[name="isSuperAdmin"]').val();

        if(isClear){
            if(isSuperAdmin && (isSuperAdmin == '0' || isSuperAdmin == 0)){

            } else {
                cityCode = '-1';
                cityName = '-1';
            }
        } else {
            if(!cityCode){
                return;
            }
        }

        App.ajax({
            type: "POST",
            url: url,
            data: {
                cityCode: cityCode,
                cityName: cityName
            },
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    $('iframe').attr('src', $('iframe').attr('src'))
                }
            }
        })
    }

    var cityData = [];

    var defaultCityName = '';

    function initCitySelect() {
        // var cityData = [{"id":"120000","name":"天津市","parentId":"100000",},
        //     {"id":"120100","name":"天津城区是对方答复","parentId":"120000","letter":"T","pinyin":"TJCQ"},
        //     {"id":"130100","name":"石家庄市","parentId":"120000","letter":"S","pinyin":"SJZS"},
        //     {"id":"130200","name":"唐山市","parentId":"120000","letter":"T","pinyin":"TSS"},
        //     {"id":"130300","name":"秦皇岛市","parentId":"120000","letter":"Q","pinyin":"QHDS"}
        //     ]
        var url = "/area/listTreeByDepartmentId";
        var departmentId = $('input[name="departmentId"]').val();
        if (context) {
            url = context + url;
        }
        if (departmentId) {
            url = url + '?departmentId=' + departmentId;
        }

        App.ajax({
            type: "POST",
            url: url,
            async: false,
            success: function (obj) {
                var code = obj.code;
                if (code == 0) {
                    var cityList = obj.data.data;
                    defaultCityName = obj.data.defaultCityName;
                    if (cityList) {
                        for (var i = 0; i < cityList.length; i++) {
                            var city = cityList[i];
                            cityData.push(city);
                        }
                        console.log(cityData);
                    }
                    initCityData();
                }
            }
        })
    }

    function initCityData() {

        // 设置接口
        MulticitySelect = $('#multi-select').citySelect({

            // 数据接口
            dataJson: cityData,

            // 多选
            multiSelect: false,

            // 多选个数
            multiMaximum: 1,

            // 开启搜索
            search: false,

            // 显示行数
            multiType: 1,

            // 插件初始化后的回调
            onInit: function () {
                console.log(this)
            },

            // 选择城市后的回调
            onCallerAfter: function (target, values) {
                console.log(JSON.stringify(values))
                changeCity();
            },

        });

        if (!isBlank(defaultCityName)) {
            MulticitySelect.setCityVal(defaultCityName);
        }
    }

    //检查参数
    function isBlank(param) {
        if (undefined === param) {
            return true;
        }
        if (null == param) {
            return true;
        }
        if ("" === param) {
            return true;
        }
        return false;
    }
</script>

</body>

</html>